<template>
  <div class="bar-content">
    <viHeader
      :title="configurationInformation.title"
      :radioList="configurationInformation.radioList"
      @enlarge="enlarge"
      @changeRadio="changeRadio"
      v-if="!configurationInformation.showHeader"
    />
    <div class="charts" ref="reference"></div>
  </div>
</template>
<script>
import viHeader from "@/components/visualization/header/index";
import echarts from "echarts";
export default {
  name: "vi-bar",
  components: {
    viHeader,
  },
  props: {
    configurationInformation: {},
    xShow:{
      default:true,
      type:Boolean,
    },
  },
  data() {
    return {
      infos: {},
    };
  },
  mounted() {},
  methods: {
    enlarge() {
      this.$emit("enlarge");
    },
    changeRadio(val) {
      // console.log(val);
      this.$emit("changeRadio", val.radio);
    },
    draw(val) {
      this.infos = val;
      this.myChart();
    },
    myChart() {
      console.log(this.infos);
      const that=this
      let colorList = ["red", "blue"];
      //   let item = this.item;
      const dom = echarts.init(this.$refs.reference);
      const option = {
        tooltip: {
          trigger: "axis",
          formatter: `{b} : {c}`,
          backgroundColor:"rgba(0,0,0,0)",
          textStyle: {
            color: "rgba(0,0,0,0)",
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              opacity: 0.5,
            },
          },
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              // 数值样式
              color: this.xShow?"rgba(68,82,121,.48)":"rgba(68,82,121,0)",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.12)",
            },
          },
          axisTick: {
            show: false,
          },
          data: this.infos.xData,
        },
        grid: {
          top: "32",
          bottom: "12",
          right: "26",
          left: "16",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          // show: false,
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(0,0,0,.04)"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.48)",
            },
          },
        },
        series: {
          type: "bar",
          data: (() => {
            let data = [];
            if (this.infos.yData && this.infos.yData.length > 0) {
              data = this.infos.yData.map((item) => {
                if (item === "0.00" || item === "0" || item === 0) {
                  return "";
                } else {
                  return item;
                }
              });
            }
            return data;
          })(),
          itemStyle: {
            normal: {
              // color: this.infos.colors.default,
              color: function (params) {
                if (params.value > 0) {
                  return "#F2493C";
                } else {
                  return "#45A5FF";
                }
              },
              label: {
                show: false, // 开启显示
                position: "top", // 在上方显示
                textStyle: {
                  // 数值样式
                  color: "rgba(68,82,121,.48)",
                  fontSize: 16,
                },
              },
            },
            emphasis: {
              // color: this.infos.colors.active,
              // color: ['blue','green'],
              label: {
                show: true, // 开启显示
                position: "top", // 在上方显示
                formatter:function(params){
                  console.log(123,params.dataIndex)
                  params.value=Number(params.value).toFixed(2)
                  if(that.xShow){
                    return params.value
                  }else{
                    return `${params.name}\n${params.value}`
                  }
                  
                },
                textStyle: {
                  // 数值样式
                  color: "rgba(68,82,121,1)",
                  fontSize: 16,
                  fontWeight: "bold",
                },
              },
            },
          },
          type: "bar",
          barWidth: this.infos.barwidth,
        },
      };

      dom.setOption(option);
      window.addEventListener("resize", () => {
        dom.resize();
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "../styles/bar.scss";
</style>
